<template>
  <div class="t-table" style="width:100%;">
    <!--highlight-current-row 选中行高亮-->
    <WfTable
            :has-form="hasForm"
            :ref-obj.sync="formOpts.ref"
            :formOpts="formOpts"
            :widthSize="4"
            @handleEvent="handleEvent"
            :table="table"
             ref="wfTable"
             columnSetting
            :columns="table.columns"
            isCopy
            :pagination="pagination"
            :is-show-pagination="true"
            @getList="getList"
            @pageChange="pageChange"
            @pageSizeChange="pageSizeChange"
            @selectChange="selectChange">   <!--@radioChange 单选的变化-->
      <!--form部分-->
    <!--  <template #wechat>
        <div style="display:flex;">
          <el-input v-model="formOpts.formData.wechat" placeholder="自定义插槽"></el-input>
        </div>
      </template>-->

      <!--form部分-->
      <template #accountType>
        <el-option
          v-for="(item,key) in formOpts.listTypeInfo.accountTypeList"
          :key="key"
          :label="item"
          :value="key"
        ></el-option>
      </template>

      <!--表格部分-->
      <template slot="sex" slot-scope="{scope}">
        <div v-show="scope.sex=='0'">
          <span>女</span>
        </div>
        <div  v-show="scope.sex=='1'">
          <span>男</span>
        </div>
      </template>

      </WfTable>


    </div>
</template>

<script>
  import WfTable from '../component/table/src/index2';
  export default {
    components:{
      WfTable
    },
    name:"table1",
    created() {

    },
    mounted() {
      for (let i = 0; i < 10; i++) {
        let obj = {
          id:Math.floor(Math.random()*100),
          date: '2019-09-25',
          name: '李四'+i,
          sex:"0",
          status: '2',
          address: '江苏省'+i
        }
        this.table.data.push(obj)
        this.pagination.total = this.table.data.length
      }
    },
    data () {
      let self = this
      return {
        hasForm:true,
        formOpts: {
          // labelPosition: 'left', // right top
          ref: null,
          formData: {
            id: `${Math.floor(Math.random() * 10 + 1)}`, // *唯一ID
            account: '', // *用户账号
            password: '', // *用户密码
            name: '', // *用户昵称
            sex: '', // *性别: 0:男 1:女
            hobby: [], // *爱好: 0:男 1:女
            phone: '', // 手机号码
            createDate: '', // 创建时间
            valDate: '', // el日期选择范围
            wechat: '', // 微信
            qq: '', // qq
            accountType: '', // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
            email: '', // 邮箱
            // desc: '', // 描述
            // number: '', // 计算器
            status: '' // *状态: 0：停用，1：启用(默认为1)',
          },
          fieldList: [
            { label: '账号', value: 'account', type: 'input', comp: 'el-input', },
            { label: '密码', value: 'password', type: 'password', comp: 'el-input' },
            { label: '状态', value: 'status', type: 'select-arr', comp: 'el-select', list: 'statusList', arrLabel: 'label', arrKey: 'value' },
            { label: '昵称', value: 'name', type: 'input', comp: 'el-input' },
            { label: '性别', value: 'sex', type: 'select-arr', comp: 'el-select', list: 'sexList', bind: { disabled: false }, arrLabel: 'label', arrKey: 'value' },
            { label: '平台用户' ,value: 'accountType', type: 'select-obj', comp: 'el-select', list: 'accountTypeList', childSlotName: 'accountType' },
            // { label: '爱好', value: 'hobby', type: 'checkbox', comp: 'el-checkbox-group', list: 'hobbyList',},
            { label: '手机号码', value: 'phone', type: 'input', comp: 'el-input', bind: { maxlength: 11 } },
            { label: '创建时间', value: 'createDate', type: 'datetime', bind: { valueFormat: 'yyyy-MM-dd HH:mm:ss' }, comp: 'el-date-picker' },

            // { label: '微信', value: 'wechat', slotName: 'wechat', rules: { required: true, message: '请输入微信', trigger: 'blur' } },
            { label: 'QQ', value: 'qq', type: 'input', comp: 'el-input' },
            { label: '邮箱', value: 'email', type: 'input', comp: 'el-input' },
            // { label: '计数器', value: 'number', type: 'inputNumber', bind: { controls: false, min: 2, max: 99 }, comp: 'el-input-number' },
            // { label: '描述', value: 'desc', type: 'textarea', comp: 'el-input', className: 't-form-block' }
            {
            labelRender: () => {
              return (
                <div class="label_render">
                 <div >element日期</div>
                 <el-tooltip >
                    <template slot="content">
                    <span>自定义label</span>
                    </template>
                    {/*<i class="el-icon-warning-outline" style="cursor: pointer;margin-right:2px;" />*/}
                  </el-tooltip>
              </div>
            )
            },
            rules: { required: false, message: '请选择element日期', trigger: 'change' },
            value: 'valDate',
            type: 'datetimerange',
            comp: 'el-date-picker',
            width:"400px",
            bind: { rangeSeparator: '至', startPlaceholder: '开始日期', endPlaceholder: '结束日期' , valueFormat: 'yyyy-MM-dd HH:mm:ss'}
          },
          ],
          // 相关列表
          listTypeInfo: {
            hobbyList: [
              { label: '吉他', value: '0' },
              { label: '看书', value: '1' },
              { label: '美剧', value: '2' },
              { label: '旅游', value: '3' },
              { label: '音乐', value: '4' }
            ],
            sexList: [
              /* { key: '女', value: 1 },
               { key: '男', value: 0 },
               { key: '女', value: 1 },
               { key: '男', value: 0 },*/
              { label: '女', value: 1 },
              { label: '男', value: 0 },
              { label: '未知', value: 0 },
            ],
            accountTypeList: {
              0: '手机用户',
              1: '论坛用户',
              2: '平台用户'
            },
            statusList: [
              { label: '启用', value: 1 },
              { label: '停用', value: 0 }
            ]
          },
/*          rules: {
            account: [
              { required: true, message: '请输入账号', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
            phone: [
              { required: true, message: '请输入手机号码', trigger: 'blur' }
            ],
            sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
            hobby: [
              { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
            ]
          },*/
        /*  operatorList: [
            { label: '提交', type: 'danger', fun: this.submitForm },
            { label: '重置', type: 'primary', fun: this.resetForm },
            { label: '清除校验', type: 'danger', fun: this.clearValidate }
          ],*/
        },


        pagination: {
          pageSize: 5, // 每页显示条数
          currentPage: 1, // 当前页
          // pagerCount: 6, // 按钮数，超过时会折叠
          pageOptions:[5,10,20,50],
          total: 100// 总条数
        },


        table: {
          // firstColumn: { type: 'index', label: '序列' },
          // firstColumn: { type: 'radio', label: '' ,width:30},
          firstColumn: { type: 'selection', label: '' ,width:30},
          changeColor: { key: 'status', val: '3', txtStyle: '#ef473a' },
          data: [
            {
              id: '1',
              date: '2019-09-25',
              name: '张三',
              sex:"0",
              status: '2',
              address: '广东省广州市天河区'
            },
            {
              id: '2',
              sex:"0",
              date: '2019-09-26',
              name: '张三1',
              status: '1',
              address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
            },
            {
              id: '3',
              sex:"1",
              date: '2019-09-27',
              name: '张三2',
              status: '3',
              address: '广东省广州市天河区3'
            },
          ],
          columns: [
            {
              prop: 'name',
              label: '姓名',
              minWidth: '100'
            },
            {
              prop: 'sex',
              label: '性别',
              minWidth: '100',
              slotName:"sex"
            },
            {
              prop: 'date',
              label: '日期',
              minWidth: '180'
            },
            //自定义标头渲染
            {
              prop: 'address',
              label: '地址',
              minWidth: '220',
              renderHeader: (h, {column}) => {
                return (
                  <div>
                    <span>{column.label}</span>
                    <el-tooltip class="tooltip" effect="dark" placement="right">
                      <ul slot="content">
                        <li>这是第二个地址a </li>
                        <li>这是第二个地址</li>
                      </ul>
                      <i class="el-icon-question"/>
                    </el-tooltip>
                  </div>
                )
              }
            },
            {
              prop: 'customRender',
              label: 'customRender',
              minWidth: '220',
              customRender:{
                comps:[
                  {
                    comp: 'el-link',
                    text: '编辑',
                    bind: {
                      type: 'primary'
                    },
                    event:(scope)=>{
                      return {
                        click:()=>{
                          // console.log("scope",scope)
                          this.xxx(scope) //
                        }
                      }
                    }
                  },
                  {
                    comp: 'el-popconfirm',
                    bind: {
                      title: '确认删除该条数据？'
                    },
                    event:(scope)=>{
                      return {
                        confirm :()=> {   //想用this 必须写成箭头函数的形式
                          this.xxx(scope.row)
                        }
                      }
                    },
                    child: [
                      {
                        slot: 'reference',
                        comp: 'el-link',
                        text: '删除',
                        bind: {
                          type: 'primary'
                        }
                      }
                    ]
                  },
                ],
              }
            },

            {
              label: '状态',
              minWidth: '180',
              render:(_,row,index) => {
                console.log("row,index",row,index)
                /* function f() {
                   console.log("a")
                 }*/
                var type = ''
                var val = ''
                switch (row.status) {
                  case '1':
                    type = ''
                    val = '待处理'
                    break
                  case '2':
                    type = 'warning'
                    val = '进行中'
                    break
                  case '3':
                    type = 'success'
                    val = '已完成'
                    break
                }
                return (
                   <el-tag v-show={!!val} type={type}>
                   {val}
                   </el-tag>
                  /*<div onClick={this.add} style="color:red;"><span style="font-weight:bold">{val}</span></div>*/
                )
              }
            },

          ],
         // 表格外操作，选中表格某行，可以将其数据传出
          toolbar: [
            {
              text: '操作1',
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
              fun: this.getBack
            },
            {
              text: '操作2',
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
              fun: this.getBack
            },
            {
              text: 'drop操作',
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
              fun: this.getBack2,
              operateList:[
                {label:"操作1",value:1},
                {label:"操作2",value:2},
                {label:"操作3",value:3},
              ]
            },
            {
              text: 'drop操作2',
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
              fun: this.getBack3,
              operateList:[
                {label:"操作11",value:11},
                {label:"操作21",value:21},
                {label:"操作31",value:31},
              ]
            }
          ],
          // 表格内操作列
          operator: [
            {
              text: '新增',
              type: 'primary',
              fun: this.add,
              icon: 'el-icon-delete',
              // status为1时，不显示此按钮
              noshow: [{ key: 'status', val: ["1"] },{key:"sex",val:["0"]},{key:"xxx",val:["xxx"]}]  // 或的关系
            },
            {
              text: '编辑',
              type: 'danger',
              // status值为2时，展示此按钮
              // show: { key: 'status', val: ['2'] },
              fun: this.edit
            },
            {
              text: '删除',
              // fun: this.del,
              render: (_,row,index) => {
                console.log("row, index",row, index)
                return (
                  <el-popconfirm
                    title="你确定要删除吗？"
                    onConfirm={() => this.del(row)}
                  >
                    <div slot="reference" type="link">
                      删除
                    </div>
                  </el-popconfirm>
                )
              }
            }
          ],
          // 操作列样式
          operatorConfig: {
            fixed: 'right', // 固定列表右边（left则固定在左边）
            width: 280,
            label: '操作'
          }
        },
      }
    },
    methods: {
      // 新增
      add (val,index,tableData) {
        console.log('新增', val,index,tableData)
      },
      // 编辑
      edit (val,index,tableData) {
        console.log('编辑', val,index,tableData)
      },
      // 删除
      del (val,index,tableData) {
        console.log('删除', val,index,tableData)
        // this.$confirm('是否永久删除该项, 是否继续?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   console.log('删除', val)
        // }).catch(() => {
        //   this.$message.info('已取消删除')
        // })
      },
      xxx(scope){
        console.log("xxx",scope)
      },

      selectChange(selection,row){
        // 选中的, 点击的
        console.log(selection,row)
      },

      pageChange(val){
        console.log(val)
        this.pagination.currentPage = val.pageNum
        // 发送请求
      },
      pageSizeChange(val){
        console.log(val)
        this.pagination.pageSize = val.pageSize

        // 发送请求
      },

      getBack (row) {
        console.log('选中行返回的数据', row)
      },
      getBack2(val){
        console.log("getBack2",val)
      },
      getBack3(val){
        console.log("getBack3",val)
      },
      getList(data){
        console.log("表单数据",data)
        let params = {
          pageSize: this.pagination.pageSize,
          pageNum: this.pagination.currentPage,
          ...data,
        }
        console.log("查询的params",  params )
      },
      handleEvent (itemKey, itemValue) {
        console.log("itemKey:",itemKey)
        console.log("itemValue:",itemValue)
        console.log(this.formOpts.formData)
        // switch (type) {
        //   case 'checkbox':
        //     console.log('checkbox', val, type)
        //     break
        // }
      },

    }
  }
</script>

<style >
   ::-webkit-scrollbar {
    width: 6px !important;          /* 纵向滚动条 宽度 */
    height: 6px !important;         /* 横向滚动条 高度 */
    background: #FFFFFF;   /* 整体背景 */
    border-radius: 3px;  /* 整体 圆角 */
  }
  /* ::-webkit-scrollbar-button{*/
  /*   width: 10px;          !* 横向滚动条 宽度 *!*/
  /*   height: 10px;          !* 纵向滚动条 高度 *!*/
  /*   background: black;*/
  /*   border-radius: 10px;*/
  /* }*/
  /* !* 5,滑块 *!*/
   ::-webkit-scrollbar-thumb {
     background: #bec5ca;
     height: 4px;
     width: 4px;
     border-radius: 10px;
   }
</style>



